<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-form label-width="70px" size="small">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="班次名称">
                <el-input v-model="query.name" style="width: 200px;"  placeholder='请输入班次名称搜索'/>
              </el-form-item>
            </el-col>
            <!-- <rrOperation :crud="crud" /> -->
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-button class="filter-item" size="mini" type="primary" @click="crud.toQuery" > 查询 </el-button>
                <el-button class="filter-item" size="mini" type="primary" @click="crud.resetQuery" plain> 重置 </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 按钮区 -->
      <crudOperation >
        <el-button class="filter-item" size="mini" type="primary" @click="add" slot="left">新增</el-button>
        <el-button :disabled="crud.selections.length !== 1||crud.selections.some(item=>item.status==='INVALID')" class="filter-item" size="mini" type="success" @click="edit"  slot="left">修改</el-button>
        <el-button :disabled="crud.selections.some(item=>item.status==='INVALID'||item.useStatus)" class="filter-item" size="mini" type="danger" @click="delect(crud.selections)"  slot="left">删除</el-button>

        <el-button :disabled="crud.selections.some(item=>item.status==='INVALID')" class="filter-item" size="mini" type="danger" @click="invalid(crud.selections)"  slot="left">废弃</el-button>

        <el-button :disabled="crud.selections.some(item=>item.useStatus||item.status==='INVALID')"
        class="filter-item" size="mini" type="success" @click="enable(crud.selections)"  slot="left">启用</el-button>

        <el-button :disabled="crud.selections.some(item=>!item.useStatus||item.status==='INVALID')" class="filter-item" size="mini" type="danger" @click="disable(crud.selections)"  slot="left">禁用</el-button>
      </crudOperation>

    </div>
    <!-- 表单渲染 -->
    <j-dialog-show
      is-mask
      :title="title"
      :visible.sync="flag"
      style="width: 45%; top:5%;"
    >
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px" size="small" style="height: 570px;overflow-y: auto;">
        <el-form-item label="班次编码" prop="code">
          <el-input :disabled='true' v-model="form.code" style="width: 160px;"/>
        </el-form-item>
        <el-form-item label="班次名称" prop="name">
          <el-input v-model="form.name" style="width: 160px;"/>
        </el-form-item>
        <el-form-item label="上班时间定义" label-width="90px" prop="workTime">
          <el-select v-model="form.workTime" placeholder="请选择" style="width: 160px"  @change="changeOne">
            <el-option
              v-for="item in work"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!-- <el-radio-group v-model="form.workTime" style="width: 236px;" @change="onTimeUp" >
            <el-radio label="1">无休</el-radio>
            <el-radio label="2">单休</el-radio>
            <el-radio label="3">多休</el-radio>
          </el-radio-group> -->
        </el-form-item>
        <el-form-item label="休息时间定义" label-width="90px" prop="restTime">
          <el-select value-key="label" v-if="multiple" :key="form.restTime" v-model="restTime" :multiple="form.workTime==='3'" :disabled="form.workTime==='1'" placeholder="请选择休息时间"
                     style="width: 160px">
            <el-option
              v-for="item in dateScopes"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="签到时间" prop="signInBeginTime">
          <el-time-picker
            v-model="form.signInBeginTime"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            :picker-options="startTimeOptions"
            placeholder="任意时间点">
          </el-time-picker>
             <!-- <el-date-picker
              v-model="form.signInBeginTime"
              type="date"
              placeholder="签到时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp" style="width: 180px">
            </el-date-picker> -->
        </el-form-item>
        <el-form-item label="签退时间" prop="signOutEndTime">
          <el-time-picker
            v-model="form.signOutEndTime" value-format="HH:mm:ss" format="HH:mm:ss"
            :picker-options="endTimeOptions"
            placeholder="任意时间点">
            </el-time-picker>
            <!-- <el-date-picker style="width: 180px"
              v-model="form.signOutEndTime"
              type="date"
              placeholder="签退时间"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp">
            </el-date-picker> -->
        </el-form-item>
        <el-form-item label="是否上班定位限制" label-width="90px" prop="isLimitSignInPosition">
          <el-select
                  v-model="form.isLimitSignInPosition"
                  class="filter-item"
                  clearable
                  placeholder="请选择"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dict.common_yes_or_no"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
        </el-form-item>
        <el-form-item label="是否下班定位限制" label-width="90px" prop="isLimitSignOutPosition">
          <el-select
                  v-model="form.isLimitSignOutPosition"
                  class="filter-item"
                  clearable
                  placeholder="请选择"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in dict.common_yes_or_no"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
        </el-form-item>
        <div>
        <el-button type="primary" @click="addlocation">添加定位地点</el-button>
            <el-table ref="tableB" stripe border :data="form.locationList" size="small" style="width: 100%;" sortable="custom"
            @row-click="selectRow" @selection-change="selectionChangeHandler"
            >
              <el-table-column  type="selection" width="60" />
              <el-table-column   prop="locationList" label="定位地点">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.location" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" :clearable="true" size="mini" @change="currentSelect($event,scope.row)" style="width: 400px" >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                      class="one-text"
                    >
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{
                        item.district
                      }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column fixed="right"  label="操作" width="150px" align="center">
                <template slot-scope="scope">
                    <div @click.stop="toDelete(scope.$index)" style="color: #409eff;">删除</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        <el-form-item label="定位地点" prop="location" label-width="90px" style="display: flex;">
          <!-- 地图 -->
          <div id="container" class="container"></div>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" rows="5" style="width: 380px;" type="textarea"/>
        </el-form-item>
        <el-row>
            <el-col :span="24" class="flex flex-reverse" style="margin-top: 20px">
              <el-button class="filter-item" size="mini" type="primary" @click="queryReport">保存</el-button>
              <el-button class="filter-item" plain size="mini" type="primary"
                         @click="resetQuery">重置
              </el-button>
            </el-col>
          </el-row>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU"
          >确认1</el-button
        >
      </div> -->
    </j-dialog-show>
    <div class="body-container">
      <!--表格渲染-->
      <el-table
        ref="table"
        border
        height="700"
        show-summary
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        :summary-method="crud.sumRow"
        @row-click="crud.selectRow"
        :row-style="crud.rowClass"
        :row-class-name="crud.tableRowClassName"
        @selection-change="crud.selectionChangeHandler"

      >
        <el-table-column :render-header="crud.renderHeader" type="selection" width="60" />
        <el-table-column :render-header="crud.renderHeader" prop="code" label="班次编码" />
        <el-table-column :render-header="crud.renderHeader" prop="name" label="班次名称" />
        <el-table-column :render-header="crud.renderHeader" prop="workTime" label="上班时间定义">
          <template slot-scope="scope" >
            <span v-if="scope.row.workTime===1">无休</span>
            <span v-if="scope.row.workTime===2">单休</span>
            <span v-if="scope.row.workTime===3">双休</span>
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader" prop="restTime" label="休息时间定义">
          <template slot-scope="{row}">
              {{ setVisitTime(row.restTime) }}
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader" prop="signInBeginTime" label="签到时间" />
        <el-table-column :render-header="crud.renderHeader" prop="signOutEndTime" label="签退时间" />
        <el-table-column :render-header="crud.renderHeader" prop="isLimitSignInPosition" label="是否上班定位限制">
          <template slot-scope="scope" >
            {{ scope.row.isLimitSignInPosition?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader" prop="isLimitSignOutPosition" label="是否下班定位限制">
          <template slot-scope="scope" >
            {{ scope.row.isLimitSignOutPosition?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader" prop="locationList" label="定位地点">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.locationList" :key="index">
              <div>{{ item.location }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader" prop="status" label="状态">
          <template slot-scope="scope" >
            {{ scope.row.status==='SAVE'?'保存':'废弃' }}
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader" prop="useStatus" label="使用状态">
          <template slot-scope="scope" >
            {{ scope.row.useStatus===1?'启用':'禁用' }}
          </template>
        </el-table-column>
        <el-table-column :render-header="crud.renderHeader" prop="remark" label="备注" />
        <el-table-column :render-header="crud.renderHeader" prop="createUserName" label="创建人" />
        <el-table-column :render-header="crud.renderHeader" prop="createTime" label="创建时间" />
        <el-table-column :render-header="crud.renderHeader" prop="enableUserName" label="启用人" />
        <el-table-column :render-header="crud.renderHeader" prop="enableTime" label="启用时间" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import {get,queryOne,del,addOrSave,disable,invalid,enable} from '@/api/erp/classes'
import crudBasGoods from '@/api/erp/classes'
import CRUD, { crud, form, header, presenter } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";
import TreeSelect from "@riophae/vue-treeselect";
import jDialogShow from '@/components/jDialogShow/jDialogShow'


// 高德
import AMapLoader from "@amap/amap-jsapi-loader";
import jDialogVue from '../../../../components/jDialog/jDialog.vue';

let curKey;
const keyList = getKeyList();
function getKeyList(){
  const List = [
        {key:'8ba9aaa5a69d690ca594415c7af28a88',status:true,pass:"c3402fcef23c9fad176f73f495507ef9"},
        {key:'2cdf75658f252034f51fdabdf1061e1c',status:true,pass:'4e14f19ab0792c19ebf7b7c3d8a9a311'},
        {key:'a9615b2d9651f6a354e3cb215e548eb9',status:true,pass:'5b0dc87c4166d0006b782602ceb93423'},
      ]
  const key = sessionStorage.getItem('gdKey')
  if(key){
    const storageKey = JSON.parse(key)
    return storageKey.filter(item=>item.status)
  }else{
    sessionStorage.setItem('gdKey',JSON.stringify(List))
    return List
  }
}

function setKey(){
curKey = keyList[(Math.random()*keyList.length)>>0]
console.log(`当前key${curKey.key}`)
window._AMapSecurityConfig = {
  // 安全密钥
  securityJsCode: curKey.pass,
};
}
setKey()


// crud交由presenter持有
const defaultCrud = CRUD({
  title: "班次",
  url: "/api/basSchedule/queryAll",
  sort: "id,desc",
  query: {
    name:'',
  },
  crudMethod: { ...crudBasGoods },
  optShow: {
    add: false,
    edit: false,
  },
  props: {
    tableColumns: ["name", "code", "type", "sourceType"],
  },
});
const defaultForm = {
  code: null,
    name: null,
    workTime: '2',
    restTime: '',
    signInBeginTime: '',
    signOutEndTime: '',
    isLimitSignInPosition: 0,
    isLimitSignOutPosition: 0,
    locationList: null,
    remark: null,
    limitLat:'',
    limitLng:'',

};

export default {
  name: "classes",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    TreeSelect,
    jDialogShow
  },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ["common_yes_or_no"],
  data() {
    return {
      location:'',
      title:'',
      flag:false,
      restTime: '',
      multiple: true,
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        signInBeginTime: [
          {  required: true, message: '请选择签到时间', trigger: 'change' }
        ],
        signOutEndTime: [
          {  required: true, message: '请选择签退时间', trigger: 'change' }
        ],
      },
        dateScopes: [{//周选择
          label: '周一', value: 1
        }, {
          label: '周二', value: 2
        }, {
          label: '周三', value: 3
        }, {
          label: '周四', value: 4
        }, {
          label: '周五', value: 5
        }, {
          label: '周六', value: 6
        }, {
          label: '周日', value: 7
        }],
        work:[
          {
             label: '无休', value: '1'
          },
          {
             label: '单休', value: '2'
          },
          {
             label: '双休', value: '3'
          },
        ],
      // 地图实例
      map: null,
      visitTimeList:['周一','周二','周三','周四','周五','周六','周日',],
      // 标记点
      marker: "",
      // 地址逆解析
      geoCoder: null,
      loading: false,
      // 搜索提示信息
      options: [],
      // 搜索提示
      AutoComplete: null,
      // 搜索关键字
      keywords: "",
      selectedIndex:'',
      selections:'',
    };
  },
  created(){
  },
  computed: {
       // 开始时间
       startTimeOptions() {
        return {
            selectableRange: `00:00:00-${this.form.signOutEndTime ? this.form.signOutEndTime : '23:59:59'}`
        }
    },
        // 结束时间
        endTimeOptions() {
            return {
                selectableRange: `${this.form.signInBeginTime ? this.form.signInBeginTime : '00:00:00'}-23:59:59}`
            }
        },
  },
  mounted() {
    console.log('mounted')
    this.initMap()
  },
  methods: {
    addlocation(){
      if (!this.form.locationList)this.$set(this.form,'locationList',[])
      this.form.locationList.push({
        location:''
      })
    },
    selectRow(row){
      this.$refs['tableB'].toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      this.selections = val
      if(this.selections.length>1){
        let del_row = this.selections.shift()
        this.$refs.tableB.toggleRowSelection(del_row,false)
      }
      console.log(this.selections,'jjgggggggggggdgggggggg');
    },
    toDelete(e){
      this.form.locationList.splice(e,1)
    },
    formatter(row){
        this.geoCoder.getAddress([row.limitLng,row.limitLat], (status, result) => {
      if (status === "complete" && result.regeocode) {
        row.location = result.regeocode.formattedAddress
        return result.regeocode.formattedAddress
      }else{
        return ''
      }
      });
    },
    add(){
      this.form={
      code: null,
        name: null,
        workTime: '2',
        restTime: '',
        signInBeginTime: '',
        signOutEndTime: null,
        isLimitSignInPosition: 0,
        isLimitSignOutPosition: 0,
        locationList: null,
        remark: null,
    };
      this.flag=true
      this.title='新增班次'
      this.crud.toAdd()
    },
    edit(){
      this.flag=true
      this.title='编辑班次'
      const data=this.crud.selections[0]
      if (data.workTime=='3') {
        this.restTime=typeof data.restTime === 'string' ?JSON.parse(data.restTime):data.restTime
      }else if (data.workTime=='2'){
        // console.log(data.restTime.match(/\d/),'kkkkkkkkkkk');
        if (!data.restTime) {this.restTime=''}else{
          this.restTime  = data.restTime.match(/\d/)[0] >> 0
        }

      }else if (data.workTime=='1'){
        this.restTime=data.restTime
      }
      this.form={
      code: data.code,
        name: data.name,
        workTime: data.workTime.toString(),
        restTime: this.restTime,
        signInBeginTime: data.signInBeginTime,
        signOutEndTime: data.signOutEndTime,
        isLimitSignInPosition: data.isLimitSignInPosition,
        isLimitSignOutPosition: data.isLimitSignOutPosition,
        locationList: data.locationList,
        remark: data.remark,
        id:data.id
    };
      this.crud.toEdit(data)
    },
    // 废弃
    invalid(selected){
      const data=selected.map(item=>{
        return item.id
      })
      invalid(data).then(res=>{
        this.crud.refresh()
      })
    },
    setVisitTime(val){
      if(!val)return
      return JSON.parse(val).map(i=>this.visitTimeList[~~i-1]).join(',')
    },
    // 删除
    delect(selected){
      const data=selected.map(item=>{
        return item.id
      })
      del(data).then(res=>{
        if (res.status===200) {
            this.crud.refresh()
            this.$message({
              message: res.msg,
              type: 'success'
            });
        }
      })
    },
    // 启用
    enable(selected){
      const data=selected.map(item=>{
        return item.id
      })
      enable(data).then(res=>{
        this.crud.refresh()
      })
    },
    // 禁用
    disable(selected){
      const data=selected.map(item=>{
        return item.id
      })
      disable(data).then(res=>{
        this.crud.refresh()
      })
    },
    // onTimeUp(data) {
    //     this.restTime = data === '3' ? [] : '';
    //     this.restTime = data === '1' ?'':[];
    //     this.multiple = false;
    //     setTimeout(()=>{
    //       this.multiple = true;
    //     },500)
    //   },
    initMap(){
        AMapLoader.load({
            key:curKey.key,
            version:"2.0",
            plugins:["AMap.Geocoder", "AMap.AutoComplete",'AMap.Geolocation'],
        }).then((AMap)=>{
            this.map = new AMap.Map("container", {
            viewMode: "2D",
            zoom: 13, //初始化地图级别
            zoomToAccuracy: true,
             resizeEnable: true
            // center: [116.397428, 39.90923], //初始化地图中心点位置
          });
          this.AutoComplete = new AMap.AutoComplete({ city: "全国" });

//    var geolocation = new AMap.Geolocation({
//             enableHighAccuracy: true,//是否使用高精度定位，默认:true
//              zoomToAccuracy: true,
//               timeout: 30000,
//             })
// geolocation.getCurrentPosition(function(status,result){
//   console.log(status,result,'llllllll');
//             if(status=='complete'){
//                 console.log('dddddddd');
//             }else{
//                 console.log('eeeeeeeee');
//             }
//         });
          //地址逆解析插件
          this.geoCoder = new AMap.Geocoder({
            city: "010", //城市设为北京，默认：“全国”
            radius: 500, //范围，默认：500
          });
          console.log('==============================')
          console.log(this.geoCoder)
          //点击获取经纬度;
          this.map.on("click", (e) => {
            if (this.selections.length===0) {
              this.$message('未选择行');
              return
            }
            this.selections.map(item=>{item.limitLng=e.lnglat.lng})
            this.selections.map(item=>{item.limitLat=e.lnglat.lat})
            // 清除点
            this.removeMarker();
            // 标记点
            this.setMapMarker();
          })
        }).catch(e=>{
          console.log('==============================',e)
        })
    },
     // 标记点
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.selections[0].limitLng, this.selections[0].limitLat],
      });
      // 逆解析地址
      this.toGeoCoder();
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    },
    // 逆解析地址
    toGeoCoder() {
      let lnglat = [this.selections[0].limitLng, this.selections[0].limitLat];
      this.geoCoder.getAddress(lnglat, (status, result) => {
        if (status === "complete" && result.regeocode) {
          this.selections.map(item=>{
            console.log(result.regeocode,'kkkkkkkkkkkkkkkkkk');
            item.location = result.regeocode.formattedAddress;
          })
        }
      });
    },

    // 搜索
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.AutoComplete.search(query, (status, result) => {
            if(status === 'error'){
              curKey.status = false
              sessionStorage.setItem('gdKey',JSON.stringify(keyList))
              location.reload()
            }
            this.options = result.tips;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    // 选中提示
    currentSelect(val,row) {
      // 清空时不执行后面代码
      if (!val) {
        return;
      }
      if (!val.location) {
        this.$message('请填写详细地址');
      }
      this.$set(row,'limitLng',val.location.lng)
      this.$set(row,'limitLat',val.location.lat)
      this.$set(row,'location',val.district + val.address+val.name)
      // 清除点
      this.removeMarker();
      // // 标记点
      this.setMapMarker();
    },

    queryReport(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          //校验通过
          if (this.form.workTime==='1') {
            this.form.restTime=''
          }else if (this.form.workTime==='2') {
                if (!this.restTime) {
                  this.form.restTime=''
                }else{
                  this.form.restTime=JSON.stringify([this.restTime])
                }
          }else if (this.form.workTime==='3'){
                if (!this.restTime) {
                  this.form.restTime=''
                }else{
                  this.form.restTime=JSON.stringify(this.restTime)
                }
          }
      addOrSave(this.form).then(res=>{
        this.crud.refresh()
        this.CRUD.STATUS.NORMAL=0
      })
      this.flag=false

      } else {
      }})
    },
    resetQuery(){
      this.restTime=''
      this.form={
          code: null,
          name: null,
          workTime: '2',
          restTime: '',
          signInBeginTime: '',
          signOutEndTime: null,
          isLimitSignInPosition: 0,
          isLimitSignOutPosition: 0,
          locationList: null,
          remark: null,
          limitLat:'',
          limitLng:''
      };
    },
    changeOne(){
    this.form.restTime=''
    this.restTime=''
    },

    // 获取数据前设置好接口地址
      [CRUD.HOOK.afterRefresh]() {
        for(let row of this.crud.data){
          const location = this.formatter(row)
          this.$set(row,'location',location)
        }
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
        form.workTime = form.workTime.toString()
        // const restTime = JSON.parse(form.restTime)
        // console.log(restTime,'kkkkkkkkkkkkkkkk');
        // this.restTime = restTime
        // if(form.workTime === '2'){
        //   this.restTime = restTime[0]
        // }else if(form.workTime === '3'){
        //   this.restTime = restTime
        // }else{
        //   this.restTime = ''
        // }
      },
      //添加提交
      [CRUD.HOOK.afterValidateCU](crud) {
      }
  }}

    </script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.blue {
  color: #409eff;
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.border {
  border: 0;
}
.bgc {
  text-align: center;
}
.container {
  width: 400px;
  height: 200px;
}
</style>
